// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form, Popconfirm, Row, Col, Button, Input } from 'antd'
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
import { get } from 'lodash'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './giftDetailStyle.less'
import { CollapsiblePanels } from 'widget/CollapsiblePanels/index'
import { Grid, QueryCondition } from 'widget/Grid/index'
import { AdvanceSearch } from 'widget/CollapsiblePanels/index'
import cx from 'classnames';
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const giftDetailView = function ({ dispatch, model, form, location, x }) {
	// 表单的子函数
	const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
	// 取出model对象，命名空间
	const { modelObj, namespace } = model

	let { detail, tableData, pageConfig, loading, queryList, lastQuery, btnLoading } = modelObj

	// console.log(lastQuery)
	let { title, totalStock, shelfStock, receiveCount } = lastQuery
	// 表格模板配置


	const columns = [
		{
			key: "wxName", dataIndex: "wxName",
			title: "微信昵称",
		},
		{
			key: "registerName", dataIndex: "registerName",
			title: "登记姓名",
		},
		{
			key: "name", dataIndex: "name",
			title: "身份证姓名",
		},
		{
			key: "mobile", dataIndex: "mobile",
			title: "客户手机号",
			width: 130
		},
		{
			key: "onlineApplyTime", dataIndex: "onlineApplyTime",
			title: "线上申领时间",
		},
		{
			key: "applyCount", dataIndex: "applyCount",
			title: "申领数量",
		},
		{
			key: "isReceive", dataIndex: "isReceive",
			title: "是否已领取",
			render: (text, record) => {
				return (
					<div>
						{text + '' === '0' && '未领取'}
						{text + '' === '1' && '已领取'}
						{text + '' === '2' && '失效'}
					</div>
				)
			}
		},
		{
			key: "confirmEip", dataIndex: "confirmEip",
			title: "核销人账号",
		},
		{
			key: "confirmTime", dataIndex: "confirmTime",
			title: "核销时间",
		},
		{
			key: "receiveType", dataIndex: "receiveType",
			title: "领取方式",
			width:120,
			render: (text, record) => {
				return (
					<div>
						<div>
							{text + '' === '1' && '领取码'}
							{text + '' === '2' && '扫码'}
						</div>
						<div>
							{record.isReceive?`(${record.userGiftId})`:''}
							
						</div>
					</div>
				)
			}
		},
		{
			key: "receiveCount", dataIndex: "receiveCount",
			title: "实际领取个数",
		},
		{
			key: "remark", dataIndex: "remark",
			title: "备注",
		},
	]
	const gridProps = {
		data: {
			columns,
			pageConfig,
			tableData
		},
		pageChange: (pageNo, pageSize) => {
			console.log(pageNo, pageSize)
			dispatch({ type: `${namespace}/pageChange`, payload: { pageNo, pageSize } });
		},
		scroll: { x: 1100 },
		loading
	}
	//查询
	const onSearch = (payload) => {
		dispatch({
			type: `${namespace}/search`,
			payload: payload
		})
	}

	//导出
	function exportGift() {
		dispatch({
			type: `${namespace}/exportGift`,
			payload: {}
		})
	}
	return (
		<div className={cx('pageLayout')} className={styles.couponDetail}>
			<div className='public_listMain'>
				<div className={"functionButton"}>
					{/* {actionType == "add" || actionType == "edit" ?
						<Button type='primary' onClick={e => submit()} loading={btnLoading}>提交</Button> : null} */}
					<Button type='primary' onClick={e => exportGift()} loading={btnLoading}>导出</Button>
				</div>
				<CollapsiblePanels title="礼品基本信息" hideUpDownBtn={true} className={styles.basicInfo}>
					{/* <Row>
						<Col span={10}>礼品名称：</Col>
						<Col span={12}>{title}</Col>
					</Row>
					<Row>
						<Col span={10}>总库存量</Col>
						<Col span={12}>{totalStock}</Col>
					</Row>
					<Row>
						<Col span={10}>上架库存：</Col>
						<Col span={12}>{shelfStock}</Col>
					</Row>
					<Row>
						<Col span={10}>领取数量：</Col>
						<Col span={12}>{receiveCount ? receiveCount : '0'}</Col>
					</Row> */}
					<Row style={{ paddingTop: '10px' }}>
						<Col span={6}>
							<label className={styles.detailTitle}>礼品名称：<span className={styles.detailSpan}>{title}</span></label>
						</Col>
						<Col span={6}>
							<label className={styles.detailTitle}>总库存量:<span className={styles.detailSpan}>{totalStock}</span></label>
						</Col>
						<Col span={6}>
							<label className={styles.detailTitle}>上架库存：<span className={styles.detailSpan}>{shelfStock}</span></label>
						</Col>
						<Col span={6}>
							<label className={styles.detailTitle}>领取数量：<span className={styles.detailSpan}>{receiveCount ? receiveCount : '0'}</span></label>
						</Col>
					</Row>
				</CollapsiblePanels>
				<CollapsiblePanels title="礼品领取使用详情" hideUpDownBtn={true} >
					<AdvanceSearch
						footer={
							<span>
								<Button type="primary" htmlType="submit" onClick={() => onSearch()} loading={modelObj.loading}>搜索</Button>
								<Button onClick={() => dispatch({ type: `${namespace}/queryReset` })}>重置</Button>
							</span>
						}
					>
						<QueryCondition
							data={queryList}
							inputChange={(key, value) => dispatch({ type: `${namespace}/inputChange`, payload: { key, value } })}
						/>
					</AdvanceSearch>
					{/* 表格区域 */}
					<div className="boxShadow">
						{/* 搜索条件 */}

						{/* 添加用户 */}
						<Grid {...gridProps} />
					</div>
				</CollapsiblePanels>
			</div>
		</div>
	)
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(giftDetailView))
